<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>设备管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <style>
        .layui-table thead span {
            /*background-color: #acd3ed;*/
            font-size: 15px;
        }

        .layui-table tbody tr td div {
            font-size: 14px;
        }

        .layui-table tbody tr:hover {
            background-color: #f6e4f7;
        }

        .layui-table tbody tr:hover td div {
            font-size: 18px;
        }
    </style>
</head>

<body class="layui-anim layui-anim-scale flag" style="display: none"><br/>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a>首页</a>
                <a>设备管理</a>
                <a id="deviceName">{$dev.name}</a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:5px;float:right"
       id="refresh" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
    </a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card" style="border-radius: 20px;">
                <div class="layui-card-body"
                     style="background-image: linear-gradient(#f6e4f7,#ffffff , #f6e4f7);border-radius: 20px;">

                    <form class="layui-form layui-col-space5" style="margin-top: 5px" id="myForm">
                        <div class="layui-input-inline">
                            <select lay-verify="choose" lay-filter="choose" name="option">
                                <option value="">选择要查找的内容</option>
                                <option value="1">用户ID</option>
                                <option value="2">设备ID</option>
                                <option value="3">所在地区</option>
                            </select>
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input style="display: none" lay-verify="message" id="findText" type="text" name="message"
                                   placeholder="" lay-reqText="" class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search">
                                <i class="layui-icon">&#xe615;</i>查找
                            </button>
                        </div>
                    </form>
                    <table id="demo" lay-filter="demo"></table>
                </div>

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/html" id="showDetail">
    <a class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-template-1  "
       lay-event="showDetail"> 查看实时动态</a>
</script>
<script type="text/html" id="barDemo">

    <a class="layui-btn layui-btn-danger layui-icon layui-icon-delete  layui-btn-xs" value="{{d.id}}" lay-event="del">
        删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-radius layui-btn-lg" lay-event="delete_all"
                style="background-color: #bd2b28">
            <i class="layui-icon layui-icon-delete"></i>批量删除
        </button>
        <button class="layui-btn layui-btn-radius layui-btn-lg" lay-event="device_add">
            <i class="layui-icon layui-icon-add-circle"></i>绑定设备
        </button>

    </div>
</script>

<script>
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;

        //动态显示
        parent.layui.notice.remove();
        parent.layui.notice.info('{$dev.name}设备管理界面', '已进入', parent.noticeOpt1);
        setTimeout(function () {
            $('.flag').show();
            tableIns.resize();
        }, 20);
        // $('.flag').show();

        $("#refresh").click(function () {
            $("#myForm")[0].reset();
            layui.form.render();
            $("#findText").hide();
            parent.layui.notice.remove();
            parent.layui.notice.success("{$dev.name}设备列表已校准", "<div class = 'layui-icon layui-icon-heart-fill'> 同步成功</div>", parent.noticeOpt6);
            table.render({
                elem: '#demo'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , url: '/index/Administrator/deviceMsg?deviceName=' + $("#deviceName").text() //数据接口
                , loading: true
                , size: 'lg'
                , initSort: {
                    field: 'serial_num' //排序字段，对应 cols 设定的各字段名
                    , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
                }
                , page: {
                    layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序
                    , limit: 7	//初始  每页几条数据
                    , limits: [7, 12, 2]	//可以选择的 每页几条数据
                    , groups: 10 	//最多几个跳页按钮
                    , first: false //不显示首页
                    , last: false //不显示尾页
                }
                , cols: [[ //表头

                    {type: 'checkbox', width: 80}
                    , {
                        field: 'status', title: '状态', width: 90, align: 'center',
                        templet: function (d) {
                            if (d.status === 0) {
                                return '<div name="lock"  lay-skin="switch" style="width: 50px;font-size: 16px;height:38px;border-radius: 10px;background-color:#b52926;color: #ffffff">异常</div>'
                            } else {
                                return '<div name="lock"  lay-skin="switch" style="width: 50px;font-size: 16px;height:38px;border-radius: 10px;background-color:#248e53;color: #ffffff">正常</div>'
                            }
                        },
                        unresize: true
                    }
                    , {field: 'serial_num', title: '设备ID', align: 'center', minWidth: 120, sort: true}
                    , {field: 'uid', title: '用户ID', minWidth: 120, align: 'center'}
                    , {field: 'area', title: '所在地区', minWidth: 300, align: 'center'}
                    , {field: 'create_time', title: '绑定时间', minWidth: 300, align: 'center'}
                    , {
                        field: 'operation',
                        title: '状态可视化',
                        width: 138,
                        align: 'center',
                        fixed: 'right',
                        toolbar: '#showDetail'
                    }
                    , {field: 'operation', title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#barDemo'}

                ]]
            });
        });

        // 自定义验证规则
        form.verify({
            choose: function (value) {
                if (!value) {
                    parent.layui.notice.remove();
                    parent.layui.notice.error('请选择搜索项', '操作异常', parent.noticeOpt5);
                    return '请选择搜索项！'
                }
                // return '请选择搜索项！'
            },
            message: function (value) {
                if (!value) {
                    parent.layui.notice.remove();
                    parent.layui.notice.error('请输入要搜索的内容', '操作异常', parent.noticeOpt5);
                    return '请输入要搜索的内容';
                }

            }

        });

        // 动态显示搜索选项提示
        form.on('select(choose)', function (data) {
            // console.log(data.elem); //得到select原始DOM对象
            // console.log(data.value); //得到被选中的值
            // console.log(data.othis); //得到美化后的DOM对象
            var findText = $("#findText");
            var select = data.value;
            findText.val('');
            // console.log(findText.val);
            switch (select) {
                case "1":
                    findText.attr('placeholder', "请输入要搜索的用户ID");
                    // findText.attr('lay-reqText', '请输入要搜索的用户ID');
                    findText.show();

                    break;
                case "2":
                    findText.show();
                    findText.attr('placeholder', '请输入要搜索的设备ID');
                    // findText.attr('lay-reqText', '请输入要搜索的设备ID');
                    break;
                case "3":
                    findText.show();
                    findText.attr('placeholder', '请输入该设备所在地区');
                    // findText.attr('lay-reqText', '请输入该设备所在地区');
                    break;
                default:
                    findText.hide();
                    break;
            }

        });

        //搜索功能
        form.on('submit(search)', function (data) {
            layer.msg('搜索中', {time: 500});
            // console.log(data.field.message);
            var load = layer.load();
            tableIns.reload({
                where: { //设定异步数据接口的额外参数，任意设
                    deviceName: $("#deviceName").text()
                    , choose: data.field.option
                    , message: data.field.message
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
                , done: function (res, curr, count) {
                    layer.close(load);
                    parent.layui.notice.remove();
                    if (count === 0) {
                        parent.layui.notice.success(res.msg, '搜索完成', parent.noticeOpt4);
                        layer.msg('搜索完成，' + res.msg, {time: 1500});
                    } else {
                        parent.layui.notice.success('找到' + count + '条数据', '搜索完成', parent.noticeOpt4);
                        layer.msg('搜索完成，找到' + count + '条数据', {time: 1500});
                    }
                }
            });

            return false;
        });

        //生成数据表格
        var tableIns = table.render({
            elem: '#demo'
            , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            , url: '/index/Administrator/deviceMsg?deviceName=' + $("#deviceName").text() //数据接口
            , loading: true
            , size: 'lg'
            , initSort: {
                field: 'serial_num' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            , page: {
                layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序
                , limit: 7	//初始  每页几条数据
                , limits: [7, 12, 2]	//可以选择的 每页几条数据
                , groups: 10 	//最多几个跳页按钮
                , first: false //不显示首页
                , last: false //不显示尾页
            }
            , cols: [[ //表头

                {type: 'checkbox', width: 80}
                , {
                    field: 'status', title: '状态', width: 90, align: 'center',
                    templet: function (d) {
                        if (d.status === 0) {
                            return '<div name="lock"  lay-skin="switch" style="width: 50px;font-size: 16px;height:38px;border-radius: 10px;background-color:#b52926;color: #ffffff">异常</div>'
                        } else {
                            return '<div name="lock"  lay-skin="switch" style="width: 50px;font-size: 16px;height:38px;border-radius: 10px;background-color:#248e53;color: #ffffff">正常</div>'
                        }
                    },
                    unresize: true
                }
                , {field: 'serial_num', title: '设备ID', align: 'center', minWidth: 120, sort: true}
                , {field: 'uid', title: '用户ID', minWidth: 120, align: 'center'}
                , {field: 'area', title: '所在地区', minWidth: 300, align: 'center'}
                , {field: 'create_time', title: '绑定时间', minWidth: 300, align: 'center'}
                , {
                    field: 'operation',
                    title: '状态可视化',
                    width: 138,
                    align: 'center',
                    fixed: 'right',
                    toolbar: '#showDetail'
                }
                , {field: 'operation', title: '操作', width: 100, align: 'center', fixed: 'right', toolbar: '#barDemo'}

            ]]
            // ,done: function(res, curr, count){
            //     //如果是异步请求数据方式，res即为你接口返回的信息。
            //     //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            //     console.log(res.data);
            //
            //     //得到数据总量
            //     console.log(count);
            // }
        });

        //监听头工具栏 批量删除 和 绑定设备 按钮
        table.on('toolbar(demo)', function (obj) {
            // console.log(obj.event);
            if (obj.event === 'device_add') {
                parent.layui.notice.remove();
                parent.layui.notice.warning('正在绑定设备', '操作提示', parent.noticeOpt3);
                xadmin.open('绑定设备', '/index/Tools/device_add_page?devName=' + $("#deviceName").text(), 400, 500, window.screen.width);
            }
            if (obj.event === 'delete_all') {
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                //判断是否为空
                parent.layui.notice.remove();
                if (!data[0]) {
                    // parent.layui.notice.options = parent.noticeOpt5;
                    parent.layui.notice.error('请选择要删除的设备ID！', '操作异常', parent.noticeOpt5);
                    return layer.msg('请选择要删除的设备ID！', {icon: 2, time: 800});
                }
                var arrSerial = new Array();
                var arrAcc = '';
                for (var i = 0, len = data.length; i < len; i++) {
                    arrSerial.push(data[i]['serial_num']);
                    arrAcc += (data[i]['uid']) + '、';
                }
                // console.log(arrAcc);
                console.log(arrSerial);
                parent.layui.notice.warning('正在删除用户: ' + arrAcc + ' 的 ' + arrSerial + ' 设备', '操作提示', parent.noticeOpt3);
                layer.confirm('真的要删除用户：' + arrAcc + ' 的 ' + arrSerial + ' 设备吗？', {closeBtn: 0}, function (index) {
                        // obj.del();
                        layer.msg('删除中……', {time: 600});
                        var load = layer.load();
                        $.ajax({
                            type: "POST",
                            url: '/index/Administrator/delAllDev',
                            data: {
                                deviceName: $("#deviceName").text(),
                                serial_num: arrSerial,
                                log: arrAcc,
                            },
                            success: function (msg) {
                                layer.close(load);
                                parent.layui.notice.remove();
                                if (msg == 'ok') {
                                    parent.layui.notice.success('成功删除用户：' + arrAcc + ' 的 ' + arrSerial + ' 设备', '操作完成', parent.noticeOpt4);
                                    layer.msg('成功删除用户：' + arrAcc + ' 的 ' + arrSerial + ' 设备', {time: 1800, icon: 1});
                                    setTimeout(function () {
                                       $("#refresh").click();
                                    }, 2000);

                                } else {
                                    parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                    layer.msg(msg, {time: 1000});
                                }

                            },
                            error: function () {
                                layer.close(load);
                                parent.layui.notice.remove();
                                parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                layer.alert('数据传输失败，请联系后台管理员！', {icon: 2})
                            }
                        });
                        layer.close(index);
                    },
                    function () {
                        layer.msg('您取消了操作', {time: 600});
                        // location.reload();
                    }
                );
            }
        });

        //监听单个删除按钮
        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            parent.layui.notice.remove();
            if (obj.event === 'del') {
                parent.layui.notice.warning('正在删除用户：' + data.uid+' 的 ' + data.serial_num + '设备。', '操作提示：', parent.noticeOpt3);
                layer.confirm('真的要删除用户 ' + data.uid + ' 的 ' + data.serial_num + '设备吗？',{closeBtn: 0}, function (index) {
                        // obj.del();
                        layer.msg('删除中……', {time: 600});
                        var load = layer.load();
                        $.ajax({
                            type: "POST",
                            url: "/index/Administrator/delDev",
                            data: {
                                deviceName: $("#deviceName").text(),
                                serial_num: data.serial_num,
                            },
                            success: function (msg) {
                                layer.close(load);
                                parent.layui.notice.remove();
                                if (msg === 'ok') {
                                    parent.layui.notice.success('成功删除用户：' + data.uid+' 的 ' + data.serial_num + '设备。', '操作完成', parent.noticeOpt4);
                                    layer.msg('成功删除用户：' + data.uid+' 的 ' + data.serial_num + '设备。', {time: 1400, icon: 1});
                                    setTimeout(function () {
                                        $("#refresh").click();
                                    }, 1200);

                                } else {
                                    parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
                                    layer.msg(msg, {time: 1000});
                                }

                            },
                            error: function () {
                                layer.close(load);
                                parent.layui.notice.remove();
                                parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
                                layer.alert('数据传输失败，请联系后台管理员！', {icon: 2})
                            }
                        });
                        layer.close(index);
                    },
                    function () {
                        layer.msg('您取消了操作', {time: 600});
                        // location.reload();
                    }
                );
            }
            //每个设备的数据可视化弹窗显示
            if (obj.event === 'showDetail') {
                // xadmin.open('添加设备', '/index/Tools/device_add_page?devName=' + $("#deviceName").text(), 400, 500, window.screen.width);
                parent.xadmin.add_tab('设备' + data.serial_num, '/index/Tools/show_detail?devName=' + $("#deviceName").text() + '&serial_num=' + data.serial_num);
            }


        });


//下面为结束符号
    });


</script>

</html>